<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript">
	$(document).ready(function(){
		$("#loginBtn").click(function(){
			$("#loginForm").submit();
		});
		$("#loginForm").submit(function(){
			if($("#id").val()==""){
				alert("아이디를 입력해주세요.");
				$("#id").focus();
				return false;
			}else if($("#password").val()==""){
				alert("비밀번호를 입력해주세요.");
				$("#password").focus();
				return false;
			}
		}); // click
		
		$(":input[name=id], :input[name=password]").keypress(function(event){
			if(event.keyCode == 13){
				$("#loginForm").submit();
				return false;
			}
		});
		
		$("#logoutBtn").click(function(){
			if(confirm("로그아웃하시겠습니까?")){
				location.href="${initParam.root}logout.do";
			} // if
		});//logout
		$("#messagePopup").click(function(){
		    window.open("${initParam.root}messenger/auth_messengerPopup.do?tab=0", "popup", "width=750, height=500, location=no, toolbar=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no" );
		});
		/* $("#chattingPage").click(function(){
			$("#chattingTable").hide(500);
		}); */
		$("#chattingPage").click(function() {
			$("#ajaxChattingDiv, #ajaxChattingInput").toggle("slow");
		});
		
		$.ajax({
			type:"post",
			url:"${initParam.root}messenger/getChatting.do",
			beforeSend:function(){
				$("#chattingTable").empty();
			},
			success:function(jsonData){
				$.each(jsonData,function(index,value){
					if(value.M_ID=="${sessionScope.loginMember.id}"){
						$("#chattingTable").append("<tr><td align='left' valign=top width='30%'><font color=blue><b>"+value.M_ID+"</b></font></td><td>"+value.MESSAGE+"</td>");
					}else{
						$("#chattingTable").append("<tr><td align='left' valign=top width='30%'><b>"+value.M_ID+"</b></td><td>"+value.MESSAGE+"</td>");
					}
				});
				$("#ajaxChattingDiv").scrollTop($("#ajaxChattingDiv")[0].scrollHeight);
			}
		}); // ajax
		$(function() {
			self.setInterval(function(){
				$.ajax({
					type:"post",
					url:"${initParam.root}messenger/getChatting.do",
					beforeSend:function(){
						$("#chattingTable").empty();
					},
					success:function(jsonData){
						$.each(jsonData,function(index,value){
							if(value.M_ID=="${sessionScope.loginMember.id}"){
								$("#chattingTable").append("<tr><td align='left' valign=top width='30%'><font color=blue><b>"+value.M_ID+"</b></font></td><td>"+value.MESSAGE+"</td>");
							}else{
								$("#chattingTable").append("<tr><td align='left' valign=top width='30%'><b>"+value.M_ID+"</b></td><td>"+value.MESSAGE+"</td>");
							}
						});
						$("#ajaxChattingDiv").scrollTop($("#ajaxChattingDiv")[0].scrollHeight);
					}
				}); // ajax
			}, 4000); // 4초에 한번 업데이트
		});
		
		$("#chattingMessage").keypress(function(event){
			if(event.keyCode == 13){
				$("#sendChattingBtn").click();
				return false;
			}
		});
		$("#sendChattingBtn").click(function(){
			//alert($("#chattingMessage").val());
			if($("#chattingMessage").val()==""){
				return;
			}
			$.ajax({
				type:"post",
				url:"${initParam.root}messenger/auth_sendChattingMessage.do",
				data:"chattingMessage="+$("#chattingMessage").val(),
				beforeSend:function(){
					$("#chattingTable").empty();
				},
				success:function(jsonData){
					$("#chattingMessage").val("");
					$.each(jsonData,function(index,value){
						if(value.M_ID=="${sessionScope.loginMember.id}"){
							$("#chattingTable").append("<tr><td align='left' valign=top width='30%'><font color=blue><b>"+value.M_ID+"</b></font></td><td>"+value.MESSAGE+"</td>");
						}else{
							$("#chattingTable").append("<tr><td align='left' valign=top width='30%'><b>"+value.M_ID+"</b></td><td>"+value.MESSAGE+"</td>");
						}
					});
					$("#ajaxChattingDiv").scrollTop($("#ajaxChattingDiv")[0].scrollHeight);
				}
			}); // ajax
		});
	}); // ready
</script>
<c:choose>
	<c:when test="${sessionScope.loginMember != null }">
	<table>
		<tr>
			<td>
				&nbsp;&nbsp;<b>${sessionScope.loginMember.name} 님</b>
				&nbsp;<a href="${initParam.root}auth_myinfo.do"><span style="font-size: 11px">내정보</span></a><br>
			</td>
			<td align="left">
				<img src="${initParam.root}img/logout.png"  height="25" id="logoutBtn" class="img_button">
			</td>
		</tr>
	</table>
	<div style="margin-left: 8%;">
		<a href="#" id="messagePopup"><span style="font-size: 12px">쪽지</span></a> | 
		<a href="#" id="chattingPage"><span style="font-size: 12px">채팅</span></a>	
	</div>
	<br>
	</c:when>
	<c:otherwise>
		<form id="loginForm" method="post"  action="${initParam.root }login.do">
		<table>
			<tr>
				<td  align="left">
					Id<br><input type="text" placeholder=" 아이디" name="id" id="id" size="15"><br>
					Password<br><input type="password" placeholder=" 비밀번호" name="password" id="password" size="15">
				</td>
				<td align="left" valign="bottom">
					<img src="${initParam.root}img/login.png"  height="70" id="loginBtn">
				</td>
			</tr>		
		</table>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="${initParam.root}register.do">
			<span style="font-size: 12px">
							회원가입</span></a>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="${initParam.root}findId.do">
			<span style="font-size: 12px">
							아이디</span></a><span style="font-size: 12px">/</span>
			<a href="${initParam.root}findPassword.do"><span style="font-size: 12px">비밀번호찾기</span></a>
		</form>
	</c:otherwise>
</c:choose>
<br>
<div id="ajaxChattingDiv">
	<table id="chattingTable">
	</table>
</div>
<div id="ajaxChattingInput" style="margin-left: -2px; padding-left: 0px; margin-top: 3px;">
	<c:if test="${sessionScope.loginMember!=null }">
		<input type="text" size="34" id="chattingMessage" maxlength="500"><img src="${initParam.root }img/send_btn.jpg" id="sendChattingBtn" style="height: 26.5px; vertical-align: -45%">
	</c:if>
	<br><br>
	<c:if test="${sessionScope.loginMember.point==-1 }">
		<a href="${initParam.root }messenger/auth_deleteChattingTable.do">채팅방청소</a>
	</c:if>
</div>
<style>
	#ajaxChattingInput input{
		border: 2px solid #0454a4;
		border-radius: 1px;
		-webkit-appearance: none;
		height: 26px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 9pt;
		padding-left: 5px;
	}


	#chattingTable{
		font: 10pt/1.5 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 0px;
		margin-bottom: 0px;
		padding: 0px;
		width: 230px;
		word-wrap: break-word;
		table-layout: fixed;
	}
	#chattingTable tr td{
		padding: 2px;
		
	}
	#ajaxChattingDiv {
		width: 250px;
		height: 250px;
		border: 1px solid #0454a4;
		overflow: auto;
	}
</style>
